{% extends 'base.html' %}

{% block content %}

    <div class="row  border-bottom white-bg dashboard-header">

        <div class="alert alert-success">this is index.html</div>

    </div>

    <br>
    <input type="text" id="message" value="Hello, World!"/>
    <button type="button" id="connect_websocket">Connect websocket</button>
    <button type="button" id="send_message">Send message</button>
    <button type="button" id="close_websocket">Close websocket</button>
    <h1>Received Messages</h1>
    <div id="messagecontainer">

    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">//<![CDATA[
    $(function () {
        $('#connect_websocket').click(function () {
            if (window.s) {
                window.s.close()
            }
            var s = new WebSocket("ws://" + window.location.host + "/ws_taskoutput/?TaskId=24915dca");
            s.onopen = function () {
                console.log('WebSocket open');
            };
            s.onmessage = function (e) {
                console.log('message: ' + e.data);
                $('#messagecontainer').prepend('<p>' + e.data + '</p>');
            };
            window.s = s;
        });
        $('#send_message').click(function () {
            if (!window.s) {
                alert("Please connect server.");
            } else {
                window.s.send($('#message').val());
            }
        });
        $('#close_websocket').click(function () {
            if (window.s) {
                window.s.close();
            }
        });

    });
    //]]></script>
{% endblock %}